<!DOCTYPE HTML>
<html>

<head>
    <style type="text/css">
        #div1 {
            width: 198px;
            height: 66px;
            padding: 10px;
            border: 1px solid #aaaaaa;
        }
    </style>
    <script type="text/javascript">
        function drag(ev) {
            //设置可拖放
            ev.dataTransfer.setData("Text", ev.target.id);
        }

        function allowDrop(ev) {
            /*
            ndragover 事件规定被拖动的数据能够被放置到何处。
            默认地，数据/元素无法被放置到其他元素中。为了实现拖放，我们必须阻止元素的这种默认的处理方式。
            这个任务由 ondragover 事件的 event.preventDefault() 方法完成：
            */
            ev.preventDefault();
        }

        function drop(ev) {
            var data = ev.dataTransfer.getData("text");
            ev.target.appendChild(document.getElementById(data));
        }
    </script>
</head>

<body>

    <p>请把 W3School 的图片拖放到矩形中：</p>

    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <br />
    <img id="drag1" src="../images/w3c.gif" draggable="true" ondragstart="drag(event)" />

</body>

</html>